<!--
 * @Author: chenchao
 * @Date: 2022-08-06 20:27:05
 * @LastEditors: chenchao
 * @LastEditTime: 2022-08-14 14:48:52
 * @Description: 
-->
<template>
    <div class="titlewhite"></div>
    <!-- <div class="nowshow-film" @click="changeFilmDetail">
        <div>
            <img src="../../public/img/30.jpg">
        </div>
        <div class="film-introduce">
            <p class="film-name">太湖鱼</p>
            <p>&nbsp;</p>
            <p class="film-actor">需要的联系</p>
            <p class="film-actor">15062446813</p>
        </div>
        <div class="film-posi">
            <button class="film-buy">购票</button>
        </div>
    </div> -->

    <div>
        <ul>
            <li v-for="qwe in dataList" :key="qwe.filmId">
                <div class="nowshow-film" @click="changeFilmDetail(qwe.filmId)">
                    <div>
                        <!-- <img src="../../public/img/30.jpg"> -->
                        <img :src="qwe.poster">
                    </div>
                    <div class="film-introduce">
                        <p class="film-name">{{ qwe.name }}</p>
                        <p class="film-actor">评分：</p>
                        <p>&nbsp;</p>
                        <span v-if="qwe.actors" class="film-actor">主演：{{ getActorsName(qwe.actors) }}</span>
                        <span v-else>暂无主演</span>
                        <p class="film-actor">{{ qwe.nation }}|{{ qwe.runtime }}分钟</p>
                    </div>
                    <div class="film-posi">
                        <button class="film-buy">购票</button>
                    </div>
                </div>

            </li>
        </ul>
    </div>
    <div class="footwhite"></div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";
import { getMzFilmDetail } from "../api/product";
export default {
    data() {
        return {
            dataList: [],
            pageNum: 1,
        };
    },
    // mounted(){
    //     axios.get('https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=1283128')
    //     .then(res => {
    //         console.log(res);
    //     });
    // },
    created() {
        getMzFilmDetail(this.pageNum).then((res) => {
            console.log(res);

            this.dataList = res.data.data.films;
        });
    },

     mounted() {
     addEventListener('scroll', this.handleScroll) // 监听页面滚动
     },
    methods: {
        changeFilmDetail(code) {
            // this.$router.push("/detail");
            this.$router.push({
                name: "detail",
                query: {
                    eee: code
                }
            });
        },
        handleScroll() {

            // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(scrollTop, '滚动距离')

            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            console.log("scrollTop :", parseInt(scrollTop));
            console.log("windowHeight :", parseInt(windowHeight));
            console.log("scrollHeight:", scrollHeight);

            //如果向上滑动到顶部条件
            if (parseInt(scrollTop) === 0) {
                //写后台加载数据的函数
                // console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
                this.pageNum = 0;
                getMzFilmDetail(this.pageNum).then(res => {
                    // console.log(res);
                    this.dataList = res.data.data.films;
                })
                // console.log("分页后的dataList---", this.dataList)

            }

            //如果向下滑动到底部条件
            if (parseInt(scrollTop + windowHeight + 100) >= scrollHeight) {
                //写后台加载数据的函数
                // console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
                this.pageNum++;
                getMzFilmDetail(this.pageNum).then(res => {
                    // console.log(res);
                    res.data.data.films.forEach(film => this.dataList.push(film));
                })
                // console.log("分页后的dataList---", this.dataList)
            }
        },
     
        //拼接名字方法
        getActorsName(actorsList) {
            return actorsList.map(item => item.name).join(' ')
        },
    },
};
</script>
